<template>
  <div class="rd-editor-view-title-bar">
    <div class="title-logo">
      <img :src="logo" />
    </div>
    <div class="menu-bar">
      <div class="menu-bar-menu-button" v-for="(item, index) in menus" :key="'title-bar-menu-' + index" @click.stop="e => menuButtonClickHandle(e, item)">{{ item.label }}</div>
    </div>
    <div class="window-title">
      <span>file name</span>
      <span>&nbsp;-&nbsp;</span>
      <span>project name</span>
      <span>&nbsp;-&nbsp;</span>
      <span>raindrop-editor</span>
    </div>
  </div>
</template>

<script>
import './index.less'
import logo from '@/assets/logo.png'

export default {
  name: 'TitleBar',
  data() {
    return {
      logo,
      menus: [
        {
          label: '文件',
          menus: [
            {
              label: '选项1',
              info: 'Ctrl+1',
              divided: true,
              onClick: () => {
                console.log(11)
              }
            },
            {
              label: '选项2',
              children: [
                {
                  label: '设置1',
                  divided: true
                },
                {
                  label: '设置2',
                  children: [
                    {
                      label: '设置1'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          label: '编辑',
          menus: [
            {
              label: '选项2',
              info: 'Ctrl+2',
              onClick: () => {
                console.log(11)
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    menuButtonClickHandle(e, item) {
      let x = e.target.offsetLeft
      let y = e.target.offsetTop + e.target.offsetHeight
      this.openContextmenu(item, x, y)
    },
    openContextmenu(item, x, y) {
      if (item.menus && item.menus.length > 0) {
        this.$contextmenu({
          menus: item.menus,
          x,
          y
        })
      }
    }
  }
}
</script>
